<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>012-重复渐变</title>
		<style>
			.box {
				width: 300px;
				height: 200px;
				border: 1px solid black;
				margin-left: 50px;
				font-size: 40px;
			}

			.box1 {
				background-image: repeating-linear-gradient(to right, red 50px, yellow 100px, green 150px);
			}

			.box2 {
				background-image: repeating-radial-gradient(red 50px, yellow 100px, green 150px);
			}
		</style>
	</head>
	<body>
		<div>
			<div class="box box1">重复线性渐变</div>
			<hr />
			<div class="box box2">重复径向渐变</div>
		</div>
	</body>
</html>
